<template>
  <!-- 定义标签 -->
  <div id="MyEcharts">
    <el-empty description="暂无数据" v-show="isEmptyObject"></el-empty>

    <div
      v-show="!isEmptyObject"
      id="main"
      ref="echart"
      :style="{
        width: width,
        height: height,
      }"
    ></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'echarts',
  data() {
    return {
      isEmptyObject: true,
      myObserver: null, //resize监听器
      timer: null, //定时器
      myEchart: null, //echart实例
    };
  },
  props: {
    width: {
      type: String,
      default: '100%',
    },

    height: {
      type: String,
      default: '400px',
    },

    options: {
      type: Object,
      require: true,
      default: () => {
        return {};
      },
    },
  },

  mounted() {
    this.myObserver = new ResizeObserver((entries) => {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(this.loadEchart(), 50);
    });
    this.myObserver.observe(this.$refs.echart);
  },

  beforeDestory() {
    clearTimeout(this.timer);
    this.myObserver.unobserve(this.$refs.echart);
  },
  watch: {
    options: {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.isEmptyObject = JSON.stringify(newValue) === '{}' ? true : false;
          if (this.isEmptyObject === false) {
            this.loadEchart();
          }
        });
      },
    },
  },
  methods: {
    loadEchart() {
      if (this.myEchart) {
        //如果echart已经初始化过，需要销毁，否则会报错：重复初始化
        this.myEchart.dispose();
      }
      // 初始化
      this.myEchart = echarts.init(this.$refs.echart);
      // 画图
      this.myEchart.setOption(this.options, true);
      this.moveLine();
    },

    moveLine() {
      let enableMove = false; //折线是否可移动
      let _curSer = null; //点击的server
      const myEchart = this.myEchart;

      myEchart.on('mousedown', (params) => {
        //点击的线条的下标 seriesIndex
        const seriesIndex = params.seriesIndex;
        //重要!  判断那些线可以移动
        const seriesId = params.seriesId;

        enableMove = seriesId.indexOf('canMove') != -1 ? true : false;
        console.log(enableMove);
        if (!enableMove) {
          return;
        }
        _curSer = myEchart.getOption().series[seriesIndex];
      });
      //  监听鼠标移动
      myEchart._zr.on('mousemove', (params) => {
        params.event.preventDefault();
        if (!enableMove) {
          return;
        }
        let position = [params.offsetX, params.offsetY];
        let res = myEchart.convertFromPixel({ xAxisIndex: 0, yAxisIndex: 0 }, position);
        let changeIndex = res[0];
        let changeData = _curSer.data;
        //超出折现两端 禁止拖动
        if (changeIndex < 0) {
          changeIndex = 0;
          return;
        } else if (changeIndex > changeData.length - 1) {
          changeIndex = changeData.length - 1;
          return;
        }
        changeData[changeIndex] = Number(res[1].toFixed(2));
        myEchart.setOption({
          series: [
            {
              id: _curSer.id,
              data: changeData,
            },
          ],
        });

        //更新站点数据集合
        // station.[changeIndex].value = changeData[changeIndex][1];
        // that.stationDataList[index] = station;
      });

      myEchart._zr.on('mouseup', (params) => {
        if (!enableMove) {
          return false;
        }
        enableMove = false;
        _curSer = null; //清空down状态
      });
    },
  },
};
</script>

<style lang="less">
#MyEcharts {
  height: 100%;
  width: 100%;

  .el-empty {
    height: 100%;
  }
}
</style>
